<!--  -->
<template>
    <pageTabelLayout>
        <template #pageHeader>
    <a-form v-if="headerShow" :model="form" layout="inline" size="mini">
        <a-form-item label="盘点单号">
            <a-input allow-clear class="bacClass" v-model="form.checkCode" :style="{ width: '200px' }"
                @press-enter="huiche" />
        </a-form-item>
        <CorporateSectorCascader :configCascader="configCascader2" @changeCascader="changeCascader2" />
        <a-form-item label-col-flex="80px" label="仓库" field="warehouseId">
            <a-select popup-container="html"  class="bacClass" v-model="form.warehouseId" allow-clear :style="{ width: '200px' }">
                <a-option v-for="item in fhWhList2" :value="item.id">
                    {{ item.warehouseName }}
                </a-option>
            </a-select>
        </a-form-item>
        <a-form-item label="日期">
            <a-range-picker  popup-container="html"  class="bacClass" :style="{ width: '250px' }" v-model="form.Dates" @change="DateChange" />
        </a-form-item>
    </a-form>
    <div class="my-divisders">
        <a-divider orientation="center">
            <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
            <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
    </div>
    <!-- '开需求单', -->
    <div style="text-align: end">
        <Toolbar :items="[
            `查询`]" @select="cx">
        </Toolbar>
    </div>
    <div class="gang"></div>
</template>
<template #pageTabel>
        <a-spin :loading="form.pageLoading" tip="加载中" dot style="height:100%;width: 100%;z-index:999 ;">
            <a-tabs   :lazy-load="true" justify  @change="tabChanges">
                <a-tab-pane :key="1" title="未平仓">
                    <div style="height: 100%">
                        <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" :suppressDragLeaveHidesColumns="true"
                            rowSelection="multiple" @grid-ready="gridReady" @columnResized="onColumnResized"
                            @columnMoved="onColumnMoved" @columnVisible="onColumnVisible" style="height: calc(100% - 45px);" :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="dataList"
                            :columnDefs="tc" :localeText="localeText1"></AgGridVuesCopys>
                            <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size @change="PageSize"
        @page-size-change="change1" style="justify-content: center" :page-size="size" :current="page" />
                    </div>
                </a-tab-pane>
                <a-tab-pane :key="2" title="已平仓">
                    <div style="height: 100%">
                        <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" :suppressDragLeaveHidesColumns="true"
                            rowSelection="multiple" @grid-ready="gridReady2" @columnResized="onColumnResized2"
                            @columnMoved="onColumnMoved2" @columnVisible="onColumnVisible2" style="height: calc(100% - 45px);" :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="dataList2"
                            :columnDefs="tc2" :localeText="localeText1"></AgGridVuesCopys>
                            <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size @change="PageSize"
        @page-size-change="change1" style="justify-content: center" :page-size="size" :current="page" />
                    </div>
                </a-tab-pane>
            </a-tabs>
        </a-spin>
    </template>
    

    <el-dialog v-model="addWeightDialog3" :width="1200" title="平仓" top="15vh">
        <el-table :data="tableData" border style="width: 100%;height:500px">
            <el-table-column prop="customName" label="客户名称 " width="150" />
            <el-table-column prop="yarnCode" label="原料编号" width="150" />
            <el-table-column prop="yarnName" label="原料名称" width="150" />
            <el-table-column prop="yarnBrand" label="纱牌" width="150" />
            <el-table-column prop="yarnBatch" label="纱批" width="150" />
            <el-table-column prop="level" label="等级" width="150" />
            <el-table-column prop="matchColor" label="可配色称" width="150" />
            <el-table-column prop="colorCode" label="色号" width="150" />
            <el-table-column prop="colorName" label="色称" width="150" />
            <el-table-column prop="stockPieceCount" label="整件/个数(库存)" width="150" />
            <el-table-column prop="stockPieceNumber" label="整件/件数(库存)" width="150" />
            <el-table-column prop="stockPieceWeight" label="整件/件重(库存)" width="150" />
            <el-table-column prop="stockBulkCount" label="散件/个数(库存)" width="150" />
            <el-table-column prop="stockBulkNumber" label="散件/件数(库存)" width="150" />
            <el-table-column prop="stockBulkWeight" label="散件/件重(库存) " width="150" />
            <el-table-column prop="weightTotal" label="总数量" width="150" />
            <el-table-column prop="unit" label="单位" width="150" />
            <el-table-column prop="location" label="库位" width="150" />
            <el-table-column prop="actualPieceCount" label="整件/个数(实际)" width="150" />
            <el-table-column prop="actualPieceNumber" label="整件/件数(实际)" width="150" />
            <el-table-column prop="actualPieceWeight" label="整件/件重(实际)" width="150" />
            <el-table-column prop="actualBulkCount" label="散件/个数(实际)" width="150" />
            <el-table-column prop="actualBulkNumber" label="散件/件数(实际)" width="150" />
            <el-table-column prop="actualBulkWeight" label="散件/件重(实际)" width="150" />
            <el-table-column prop="supplier" label="供应商名称" width="150" />
            <el-table-column prop="customOrderNo" label="客户订单号" width="150" />
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="() => addWeightDialog3 = false">关闭</el-button>
                <el-button type="primary" @click="pinChangs" v-if="tabIds == 1">平仓</el-button>
            </span>
        </template>
    </el-dialog>
</pageTabelLayout>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import { post, get } from '@/api/http'
import { Message, Modal } from '@arco-design/web-vue'

import { localeText } from '@/api/aggridZw'
import { pagingList } from '@/api/paging'
import { EXELTABLE } from '@/utils/exportEXCEL';
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
import WHService from '@/service/wh'
import dayjs from 'dayjs';
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'
import { saveOrUpdateGridState as saveOrUpdateGridState02 } from '@/hooks/useGridState'
const headerShow = ref(true)

const tabIds = ref(1)

const tabChanges = (val: any) => {
    tabIds.value = val
    if (val == 1) {
        doRefresh();
    } else {
        doRefresh2();
    }
}

const pagingList1: any = ref(pagingList)
const localeText1: any = ref(localeText)

const defaultColDef: any = {
    sortable: true,
    resizable: true,
    filter: true,
}
const gridOption = ref()
const colState = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
    colState.value = params.columnApi
}

const gridOption2 = ref()
const colState2 = ref()
const gridReady2 = (params: any) => {
    gridOption2.value = params.api
    colState2.value = params.columnApi
}

const total = ref(0);
const page = ref(1);
const size = ref(10);
function PageSize(val: any) {
    page.value = val
    if (tabIds.value == 1) {
        doRefresh();
    } else {
        doRefresh2();
    }
}
function change1(val: any) {
    size.value = val
    if (tabIds.value == 1) {
        doRefresh();
    } else {
        doRefresh2();
    }
}

const dataList: any = ref([])
const dataList2: any = ref([])

function doRefresh() {
    form.pageLoading = true
    post({
        url: "/wms/yarnStockCeckPlan/getPage",
        data: {
            page: page.value,
            size: size.value,
            beginDate: !form.Dates[0] ? '' : form.Dates[0],
            endDate: !form.Dates[1] ? '' : form.Dates[1],
            checkCode: form.checkCode,
            warehouseId: form.warehouseId,
            companyId: form.companyId,
            "registerState": 1,
            "balanceState": 0
        },
    })
        .then(({ data, code }: any) => {
            if (code === 200) {
                dataList.value = data.list
                gridOption.value.setRowData(data.list)
                total.value = data.total;
            }
        })
        .catch(console.log).finally(() => {
            form.pageLoading = false
        })
}

function doRefresh2() {
    form.pageLoading = true
    post({
        url: "/wms/yarnStockCeckPlan/getPage",
        data: {
            page: page.value,
            size: size.value,
            beginDate: !form.Dates[0] ? '' : form.Dates[0],
            endDate: !form.Dates[1] ? '' : form.Dates[1],
            checkCode: form.checkCode,
            warehouseId: form.warehouseId,
            companyId: form.companyId,
            "registerState": 1,
            "balanceState": 1
        },
    })
        .then(({ data, code }: any) => {
            if (code === 200) {
                dataList2.value = data.list
                gridOption2.value.setRowData(data.list)
                total.value = data.total;
            }
        })
        .catch(console.log).finally(() => {
            form.pageLoading = false
        })
}


const cx = () => {
    page.value = 1
    if (tabIds.value == 1) {
        doRefresh();
    } else {
        doRefresh2();
    }
}

onMounted(() => {
    updateGridState01()
    updateGridState02()
    pageData.rHeight = document.getElementsByClassName("main-section")[0]?.clientHeight
    //弹出层的高
    if (pageData.rHeight !== undefined) {
        pageData.rHeight = pageData.rHeight;
    }
    if (tabIds.value == 1) {
        doRefresh();
    } else {
        doRefresh2();
    }
})
const pageData = reactive({
    showAdd: false,
    rHeight: 0,
})

const dataForm: any = reactive({
    checkCode: '',
    remark: '',
    warehouseName: '',
    companyName: '',
    warehouseId: null,
    companyId: null,
    warehouseldAndName: ''
})

const tableColumns: any = [
    {
        title: "盘点单号",
        key: "checkCode",
        dataIndex: "checkCode",
        width: 150,
    },
    {
        title: "盘点计划时间",
        key: "planDate",
        dataIndex: "planDate",
        width: 150,
    },
    {
        title: "盘点登记时间",
        key: "registerDate",
        dataIndex: "registerDate",
        width: 150,
    },
    // {
    //     title: "平仓时间",
    //     key: "balanceDate",
    //     dataIndex: "balanceDate",
    //     width: 150,
    // },
    {
        title: "公司",
        key: "companyName",
        dataIndex: "companyName",
        width: 200,
    },
    {
        title: "仓库名称",
        key: "warehouseName",
        dataIndex: "warehouseName",
        width: 450,
    },
    {
        title: "计划状态",
        key: "planState",
        dataIndex: "planState",
        fixed: 'right',
        width: 180,
    },
    {
        title: "登记状态",
        key: "registerState",
        dataIndex: "registerState",
        width: 150,
    },
    {
        title: "平仓状态",
        key: "balanceState",
        dataIndex: "balanceState",
        width: 150,
    },
    {
        title: "锁仓状态",
        key: "lockState",
        dataIndex: "lockState",
        width: 150,
        fixed: 'right'
    },
    {
        title: "登记人",
        key: "registerName",
        dataIndex: "registerName",
        width: 150,
    },
    {
        title: "平仓人",
        key: "balanceName",
        dataIndex: "balanceName",
        width: 150,
    },
    {
        title: "创建人",
        key: "createName",
        dataIndex: "createName",
        width: 150,
    },
    {
        title: "创建时间",
        key: "createTime",
        dataIndex: "createTime",
        width: 150,
    },
    {
        title: "修改人",
        key: "updateName",
        dataIndex: "updateName",
        width: 150,
    },
    {
        title: "修改时间",
        key: "updateTime",
        dataIndex: "updateTime",
        width: 150,
    },
    {
        title: "备注",
        key: "remark",
        dataIndex: "remark",
        width: 150,
    },
    {
        title: "操作",
        key: "alites",
        dataIndex: "alites",
        slotName: 'alites',
        width: 80,
        fixed: 'right'
    }
]

const Corporate: any = ref()

let tc: any[] = tableColumns.map((o: any) => {

    let obj = {
        headerName: o.title,
        field: o.key,
        pinned: o['fixed'],
    }
    if (o.key === 'alites') {
        obj['resizable'] = false
        obj['filter'] = false
        obj['sortable'] = false
        obj["lockPosition"] = "right"
        obj['width'] = 150
        obj['cellRenderer'] = {
            template: `<el-button style="color:#165dff;" link @click="a1">查看物料清单</el-button>`,
            setup(props: any) {
                const a1 = () => {
                    // /wms/GreyStockCheckDetail/getList  参数{"checkPlanId":1}
                    post({
                        url: '/wms/yarnstockcheckdetail/queryDetailData',
                        data: {
                            checkPlanId: props.params.data.id
                        }
                    }).then(({ code, data, message }) => {
                        if (code == 200) {
                            addWeightDialog3.value = true
                            tableData.value = data
                        } else {
                            Message.error(message)
                        }
                    })
                }
                return {
                    a1,
                }
            }

        }
    }
    if (o.key === 'planState') {
        obj['resizable'] = false
        obj['sortable'] = false
        obj["lockPosition"] = "right"
        obj['width'] = 150
        obj['cellRenderer'] = {
            template: `
            <a-tag v-if="a == 0" color="pinkpurple">未确认</a-tag>
            <a-tag v-if="a == 1" color="green">已确认</a-tag>
            <a-tag v-if="a == 2" color="red">已作废</a-tag>
            `,
            setup(props: any) {
                return {
                    a: props.params.data.planState
                }
            }

        }
        obj['filterParams'] = {
      valueFormatter: function (params: any) {
        return params.value == '0'
          ? '未确认'
          : params.value == '1'
          ? '已确认'
          : params.value == '2'
          ? '已作废'
          : ''
      },
    }
    }
    if (o.key === 'lockState') {
        obj['resizable'] = false
        obj['sortable'] = false
        obj["lockPosition"] = "right"
        obj['width'] = 150
        obj['cellRenderer'] = {
            template: `
            <a-tag v-if="a == 0" color="pinkpurple">未锁仓 </a-tag>
            <a-tag v-if="a == 1" color="red">已锁仓</a-tag>
            `,
            setup(props: any) {
                return {
                    a: props.params.data.lockState
                }
            }

        }
        obj['filterParams'] = {
      valueFormatter: function (params: any) {
        return params.value == '0'
          ? '未锁仓'
          : params.value == '1'
          ? '已锁仓'
          : ''
      },
    }
    }
    if (o.key === 'registerState') {
        obj['resizable'] = false
        obj['sortable'] = false
        obj["lockPosition"] = "right"
        obj['width'] = 150
        obj['cellRenderer'] = {
            template: `
            <a-tag v-if="a == 0" color="red">未登记 </a-tag>
            <a-tag v-if="a == 1" color="pinkpurple">已登记</a-tag>
            `,
            setup(props: any) {
                return {
                    a: props.params.data.registerState
                }
            }

        }
        obj['filterParams'] = {
      valueFormatter: function (params: any) {
        return params.value == '0'
          ? '未登记'
          : params.value == '1'
          ? '已登记'
          : ''
      },
    }
    }
    if (o.key === 'balanceState') {
        obj['resizable'] = false
        obj['sortable'] = false
        obj["lockPosition"] = "right"
        obj['width'] = 150
        obj['cellRenderer'] = {
            template: `
            <a-tag v-if="a == 0" color="red">未平仓</a-tag>
            <a-tag v-if="a == 1" color="pinkpurple">已平仓</a-tag>
            `,
            setup(props: any) {
                return {
                    a: props.params.data.balanceState
                }
            }

        }
        obj['filterParams'] = {
      valueFormatter: function (params: any) {
        return params.value == '0'
          ? '未平仓'
          : params.value == '1'
          ? '已平仓'
          : ''
      },
    }
    }
    return obj
})

let a = [{
    showRowGroup: 'hide_def',
    "headerName": "",
    "checkboxSelection": true,
    "headerCheckboxSelection": true,
    "pinned": "left",
    "width": 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    lockPosition: "left",
}]
tc = a.concat(tc)

const tableColumns2: any = [
    {
        title: "盘点单号",
        key: "checkCode",
        dataIndex: "checkCode",
        width: 150,
    },
    {
        title: "盘点计划时间",
        key: "planDate",
        dataIndex: "planDate",
        width: 150,
    },
    {
        title: "盘点登记时间",
        key: "registerDate",
        dataIndex: "registerDate",
        width: 150,
    },
    {
        title: "平仓时间",
        key: "balanceDate",
        dataIndex: "balanceDate",
        width: 150,
    },
    {
        title: "公司",
        key: "companyName",
        dataIndex: "companyName",
        width: 200,
    },
    {
        title: "仓库名称",
        key: "warehouseName",
        dataIndex: "warehouseName",
        width: 450,
    },
    {
        title: "计划状态",
        key: "planState",
        dataIndex: "planState",
        fixed: 'right',
        width: 180,
    },
    {
        title: "登记状态",
        key: "registerState",
        dataIndex: "registerState",
        width: 150,
    },
    {
        title: "平仓状态",
        key: "balanceState",
        dataIndex: "balanceState",
        width: 150,
    },
    {
        title: "锁仓状态",
        key: "lockState",
        dataIndex: "lockState",
        width: 150,
        fixed: 'right'
    },
    {
        title: "登记人",
        key: "registerName",
        dataIndex: "registerName",
        width: 150,
    },
    {
        title: "平仓人",
        key: "balanceName",
        dataIndex: "balanceName",
        width: 150,
    },
    {
        title: "创建人",
        key: "createName",
        dataIndex: "createName",
        width: 150,
    },
    {
        title: "创建时间",
        key: "createTime",
        dataIndex: "createTime",
        width: 150,
    },
    {
        title: "修改人",
        key: "updateName",
        dataIndex: "updateName",
        width: 150,
    },
    {
        title: "修改时间",
        key: "updateTime",
        dataIndex: "updateTime",
        width: 150,
    },
    {
        title: "备注",
        key: "remark",
        dataIndex: "remark",
        width: 150,
    },
    {
        title: "操作",
        key: "alites",
        dataIndex: "alites",
        slotName: 'alites',
        width: 80,
        fixed: 'right'
    }
]

let tc2: any[] = tableColumns2.map((o: any) => {

    let obj = {
        headerName: o.title,
        field: o.key,
        pinned: o['fixed'],
    }
    if (o.key === 'alites') {
        obj['resizable'] = false
        obj['filter'] = false
        obj['sortable'] = false
        obj["lockPosition"] = "right"
        obj['width'] = 150
        obj['cellRenderer'] = {
            template: `<el-button style="color:#165dff;" link @click="a1">查看物料清单</el-button>`,
            setup(props: any) {
                const a1 = () => {
                    post({
                        url: '/wms/yarnstockcheckdetail/queryDetailData',
                        data: {
                            checkPlanId: props.params.data.id
                        }
                    }).then(({ code, data, message }) => {
                        if (code == 200) {
                            addWeightDialog3.value = true
                            tableData.value = data
                        } else {
                            Message.error(message)
                        }
                    })
                }
                return {
                    a1,
                }
            }

        }
    }
    if (o.key === 'planState') {
        obj['resizable'] = false
        obj['sortable'] = false
        obj["lockPosition"] = "right"
        obj['width'] = 150
        obj['cellRenderer'] = {
            template: `
            <a-tag v-if="a == 0" color="pinkpurple">未确认</a-tag>
            <a-tag v-if="a == 1" color="green">已确认</a-tag>
            <a-tag v-if="a == 2" color="red">已作废</a-tag>
            `,
            setup(props: any) {
                return {
                    a: props.params.data.planState
                }
            }

        }
        obj['filterParams'] = {
      valueFormatter: function (params: any) {
        return params.value == '0'
          ? '未确认'
          : params.value == '1'
          ? '已确认'
          : params.value == '2'
          ? '已作废'
          : ''
      },
    }
    }
    if (o.key === 'lockState') {
        obj['resizable'] = false
        obj['sortable'] = false
        obj["lockPosition"] = "right"
        obj['width'] = 150
        obj['cellRenderer'] = {
            template: `
            <a-tag v-if="a == 0" color="pinkpurple">未锁仓 </a-tag>
            <a-tag v-if="a == 1" color="red">已锁仓</a-tag>
            `,
            setup(props: any) {
                return {
                    a: props.params.data.lockState
                }
            }

        }
        obj['filterParams'] = {
      valueFormatter: function (params: any) {
        return params.value == '0'
          ? '未锁仓'
          : params.value == '1'
          ? '已锁仓'
          : ''
      },
    }
    }
    if (o.key === 'registerState') {
        obj['resizable'] = false
        obj['sortable'] = false
        obj["lockPosition"] = "right"
        obj['width'] = 150
        obj['cellRenderer'] = {
            template: `
            <a-tag v-if="a == 0" color="red">未登记 </a-tag>
            <a-tag v-if="a == 1" color="pinkpurple">已登记</a-tag>
            `,
            setup(props: any) {
                return {
                    a: props.params.data.registerState
                }
            }

        }
        obj['filterParams'] = {
      valueFormatter: function (params: any) {
        return params.value == '0'
          ? '未登记'
          : params.value == '1'
          ? '已登记'
          : ''
      },
    }
    }
    if (o.key === 'balanceState') {
        obj['resizable'] = false
        obj['sortable'] = false
        obj["lockPosition"] = "right"
        obj['width'] = 150
        obj['cellRenderer'] = {
            template: `
            <a-tag v-if="a == 0" color="red">未平仓</a-tag>
            <a-tag v-if="a == 1" color="pinkpurple">已平仓</a-tag>
            `,
            setup(props: any) {
                return {
                    a: props.params.data.balanceState
                }
            }

        }
        obj['filterParams'] = {
      valueFormatter: function (params: any) {
        return params.value == '0'
          ? '未平仓'
          : params.value == '1'
          ? '已平仓'
          : ''
      },
    }
    }
    return obj
})
tc2 = a.concat(tc2)



const form: any = reactive({
    "checkCode": '',
    "warehouseName": '',
    "Dates": ['', ''],
    "companyId": null,
    "warehouseId": null,
})

const huiche = () => {
    // doRefresh();
}


const DateChange = (val: any) => {
    if (!val) {
        form.Dates = ['', '']
    }
}


const configCascader2 = ref<{}>({
    corporateWidth: '200px', //公司宽度
    corporateNameLabelWidth: '80px',
    sectorWidth: '180px', //部门宽度
    corporateRquired: false, //公司是否必填
    sectorRquired: false, //部门是否必填
    size: 'mini', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '选择公司', //公司label
    sectorName: '选择部门', //部门label
    cascaderShow: 'sector', //配置部门不显示
})
const whService2 = new WHService()
const fhWhList2: any = whService2.whList
const changeCascader2 = (data: any) => {
    const { corporateId, sectorId, sectorLabel, corporateLabel } = data
    form.warehouseId = ''
    form.companyId = corporateId
    whService2.getWarhouseListByFirmId(corporateId, '原纱仓')
}

const addWeightDialog3 = ref(false)

const pinChangs = () => {
    post({
        url: 'wms/yarnStockCeckPlan/setBalance',
        data: {
            id: gridOption.value.getSelectedRows()[0].id
        }
    }).then(({ code, message }) => {
        if (code == 200) {
            addWeightDialog3.value = false
            doRefresh();
            Message.success('成功')
        } else {
            Message.error(message)
        }
    })
}

const tableData: any = ref([])
const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('ysPdPcLbs-1', gridOption, colState, tc)
const onColumnMoved = () => {
    saveGridState01()
}
const onColumnResized = () => {
    saveGridState01()
}
const onColumnVisible = () => {
    saveGridState01()
}
const { saveGridState: saveGridState02, updateGridState: updateGridState02 } = saveOrUpdateGridState02('ysPdPcLbs-2', gridOption2, colState2, tc2)
const onColumnMoved2 = () => {
    saveGridState02()
}
const onColumnResized2 = () => {
    saveGridState02()
}
const onColumnVisible2 = () => {
    saveGridState02()
}
</script>
<style lang='less' scoped>
:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

:deep(.arco-table-td-content) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>